<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1. 实例成员： 定义在类 里面 的属性和方法
        因为都需要 实例化 才能够使用
        只能 实例对象 自身访问，类 无法访问
      */
      /* 
        
        2. 静态成员： 定义在 类 外面 的属性和方法
        只能通过 类 自身访问，实例对象 无法访问

        3. 通过 static 定义在类的属性和方法，都是静态的，不需要再写在外面了
     */
      class App {
        // static快速的定义 静态属性
        static name = 'App';
        // static快速的定义 静态方法
        static add(a, b) {
          console.log('App.add -----> ', a + b);
        }
        // 实例属性
        state = { count: 100 };
        // 实例方法
        render() {
          console.log('调用了app的render');
        }
      }

      //   静态属性
      //   App.name = 'App';
      //   //   静态方法
      //   App.add = (a, b) => {
      //     console.log('App.add -----> ', a + b);
      //   };

      const obj = new App();
      console.log('obj -----> ', obj);
      //   console.log('obj.state.count -----> ', obj.state.count);
      //   obj.render();

      //   实例对象无法访问 类 的静态属性和方法
      //   console.log('obj.name -----> ', obj.name);
      //   obj.add(1, 2);

      // 目前会报错，因为只有实例成员
      //   console.log('App.state.count -----> ', App.state.count);
      console.log('App.name -----> ', App.name);
      App.add(1, 2);
    </script>
  </body>
</html>
